Show elapsed time on the workflow job output toolbar by blaipr · Pull Request #393 · ctrliq/ascender

blaipr · 2026-06-11T19:19:38Z

SUMMARY

Regular job output pages show a live hh:mm:ss elapsed badge — ticking every second while the job runs, switching to the API's final elapsed value on completion. Workflow job output pages showed no elapsed time at all, live or final.

The workflow output toolbar now renders the same badge next to Total Nodes:

a one-second interval recomputes elapsed from job.started while the workflow runs
the existing websocket-driven refetch (useWsJob refetches on terminal statuses) delivers finished/elapsed, so the badge settles on the authoritative final value without a reload
calculateElapsed moves from a private helper inside OutputToolbar to util/dates alongside secondsToHHMMSS, and OutputToolbar now uses both shared helpers (no behavior change there)

No locale-catalog changes needed — both strings (Elapsed, Elapsed time that the job ran) already exist in the catalogs.

Independent of every other open PR — verified conflict-free via pairwise git merge-tree (the elapsed-state hooks are deliberately placed clear of the hunks #392 touches in the same file).

ISSUE TYPE

New or Enhanced Feature

COMPONENT NAME

UI

ASCENDER VERSION

awx: 25.4.1.dev6+g9b44420

ADDITIONAL INFORMATION

Tests: unit coverage for calculateElapsed (zero/unstarted cases, fake-timer arithmetic) and two toolbar tests (badge ticks under fake timers while running; shows the formatted final elapsed and stops ticking once finished).

npm --prefix awx/ui run lint     # clean
npm --prefix awx/ui run test     # 544 suites, 2859 passed (incl. 6 new)
npm --prefix awx/ui run build    # succeeds

Regular job output pages show a live hh:mm:ss elapsed badge that ticks every second while the job runs and switches to the API's final elapsed value on completion. Workflow job output pages showed no elapsed time at all, live or final. The workflow output toolbar now renders the same badge next to Total Nodes: a one-second interval recomputes elapsed from job.started while the workflow runs, and the websocket-driven job refetch (useWsJob refetches on terminal statuses) delivers finished/elapsed so the badge settles on the authoritative value without a reload. calculateElapsed moves from a private helper inside OutputToolbar to util/dates alongside secondsToHHMMSS, and OutputToolbar now uses both shared helpers; no behavior change there. Both strings already exist in the locale catalogs, so no catalog changes are needed.

Copilot

Pull request overview

This PR adds a live hh:mm:ss elapsed-time badge to the Workflow Job Output toolbar (matching the behavior of regular job output), and centralizes the elapsed-time calculation into shared date utilities.

Changes:

Render an “Elapsed” badge in WorkflowOutputToolbar, updating every second while the workflow job is running and switching to the API-provided final elapsed after completion.
Promote calculateElapsed into awx/ui/src/util/dates.js and update JobOutput’s OutputToolbar to use shared secondsToHHMMSS.
Add unit tests for calculateElapsed plus workflow toolbar tests validating ticking behavior and final-value behavior.

Reviewed changes

Copilot reviewed 5 out of 6 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
awx/ui/src/util/dates.js	Adds exported `calculateElapsed` helper alongside existing duration formatting helpers.
awx/ui/src/util/dates.test.js	Adds unit tests covering `calculateElapsed` behavior under fake timers.
awx/ui/src/screens/Job/WorkflowOutput/WorkflowOutputToolbar.js	Adds the elapsed-time badge and timer state/effect to the workflow output toolbar.
awx/ui/src/screens/Job/WorkflowOutput/WorkflowOutputToolbar.test.js	Extends toolbar tests to cover elapsed badge ticking and final elapsed display.
awx/ui/src/screens/Job/JobOutput/shared/OutputToolbar.js	Switches elapsed formatting to shared `secondsToHHMMSS` and imports shared helpers.
awx/ui/package-lock.json	Contains a small lockfile metadata change unrelated to the feature.

Files not reviewed (1)

awx/ui/package-lock.json: Generated file

+          <Badge isRead id="workflow-elapsed-badge">
+            {job.finished
+              ? secondsToHHMMSS(job.elapsed)
+              : activeJobElapsedTime}
+          </Badge>


    shouldFind(`Button[ouiaId="edit-workflow"]`);
    shouldFind('Button#workflow-output-toggle-legend');
-    shouldFind('Badge');
+    expect(wrapper.find('Badge')).toHaveLength(2);


  test('Shows correct number of nodes', () => {
    // The start node (id=1) and deleted nodes (isDeleted=true) should be ignored
-    expect(wrapper.find('Badge').text()).toBe('1');
+    expect(wrapper.find('Badge').last().text()).toBe('1');


- When a websocket status_changed message sets job.finished before the follow-up refetch delivers the authoritative job.elapsed, keep showing the last live timer value instead of formatting undefined (applied to both toolbars; new test covers the window) - Select badges by id in tests instead of count/order - Revert accidental package-lock metadata churn

cigamit · 2026-06-12T07:00:41Z

We should probably add a right margin or some padding to the badge. The badge should probably also have a fixed width (or the fixed width font), as it constantly changes size as the characters get wider or slimmer.

cigamit · 2026-06-12T07:00:54Z

Otherwise tested and works fine.

blaipr · 2026-06-12T13:16:52Z

All four comments addressed: (1) the badge keeps showing the last live timer value while finished is set but the refetched elapsed hasn't arrived (job.elapsed != null guard, applied to both toolbars since they share the ws semantics; new test covers the window); (2)+(3) tests select badges by id instead of count/order; (4) the lockfile metadata churn is reverted — it was accidental, from a cross-branch npm install. 121 tests pass across the touched suites.

blaipr · 2026-06-12T13:28:28Z

All review feedback on this PR is addressed, and after the latest merges to main (#376, #380, #386, #389, #391, #394) this branch has been re-verified: it merges cleanly into current main (51188f0) and is conflict-free against every other open PR (git merge-tree, all pairs). Ready to merge — in any order relative to #385/#390/#392/#393/#395.

The elapsed badge sat flush against the Total Nodes label and resized as the ticking digits changed width. It now has a 20px right margin, a 70px minimum width and tabular-nums digits, so the toolbar no longer shifts as the timer runs. The job output toolbar's elapsed badge gets the same width treatment (it had the identical wobble; its spacing was already handled by BadgeGroup).

blaipr · 2026-06-12T13:38:06Z

@cigamit good catch — and apologies, my earlier "all feedback addressed" comment was posted after yours but only covered the Copilot review items; I'd missed the conversation thread. Both points from your screenshot are fixed now:

spacing: the elapsed badge has a 20px right margin, so it no longer sits flush against "Total Nodes"
width: the badge has min-width: 70px plus font-variant-numeric: tabular-nums, so it keeps a constant width while the timer ticks instead of jittering with digit widths

The job output toolbar's elapsed badge got the same width treatment, since it had the identical wobble (its spacing was already fine via BadgeGroup). 132 tests pass across both toolbars; lint clean.

cigamit requested a review from Copilot June 11, 2026 22:51

Copilot started reviewing on behalf of cigamit June 11, 2026 22:52 View session

Copilot AI reviewed Jun 11, 2026

View reviewed changes

This was referenced Jun 12, 2026

Make VisualizerNode styling props transient #395

Merged

Add React Testing Library migration infrastructure and first conversions #385

Merged

Surface an error when the webhook credential type lookup returns nothing #390

Merged

blaipr mentioned this pull request Jun 12, 2026

Migrate react-router usage to v6 compat APIs (bridge + all non-route-tree files) #392

Merged

Revert accidental lockfile churn (again)

b735787

blaipr force-pushed the feature/workflow-elapsed-timer branch from 922c6f3 to b735787 Compare June 12, 2026 13:38

blaipr mentioned this pull request Jun 12, 2026

Modernize the frontend toolchain: Lingui 6, ESLint 9 and @dagrejs/dagre #391

Merged

cigamit approved these changes Jun 12, 2026

View reviewed changes

cigamit merged commit 13c9e0e into ctrliq:main Jun 12, 2026

cigamit self-assigned this Jun 18, 2026

Navigation Menu

Uh oh!

Show elapsed time on the workflow job output toolbar - #393

Show elapsed time on the workflow job output toolbar#393
cigamit merged 4 commits into
ctrliq:mainfrom
blaipr:feature/workflow-elapsed-timer

blaipr commented Jun 11, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

cigamit commented Jun 12, 2026

Uh oh!

cigamit commented Jun 12, 2026

Uh oh!

blaipr commented Jun 12, 2026

Uh oh!

blaipr commented Jun 12, 2026

Uh oh!

blaipr commented Jun 12, 2026

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

blaipr commented Jun 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

SUMMARY

ISSUE TYPE

COMPONENT NAME

ASCENDER VERSION

ADDITIONAL INFORMATION

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

cigamit commented Jun 12, 2026

Uh oh!

cigamit commented Jun 12, 2026

Uh oh!

blaipr commented Jun 12, 2026

Uh oh!

blaipr commented Jun 12, 2026

Uh oh!

blaipr commented Jun 12, 2026

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

3 participants

blaipr commented Jun 11, 2026 •

edited

Loading